<template>
  <div class="home">
    <!-- 文化节横幅 -->
    <div class="festival-banner">
      <div class="banner-content">
        <img class="festival-logo" src="/images/logo.png" alt="葫芦文化节" >
      </div>
    </div>

    <!-- 比赛卡片区域 -->
    <div class="competitions-section">
      <div v-for="item in competitions" :key="item.id" class="competition-card">
        <div class="card-header">
          <h3 class="competition-title">{{ item.title }}</h3>
        </div>
        <div class="registration-info">
          <span class="time-label">报名时间</span>
          <span class="time-range">{{ item.registrationTime }}</span>
        </div>
        <button
          class="register-btn"
          :style="{
            backgroundColor: item.background,
          }"
          @click="handleRegistration(item)"
        >
          我要报名
        </button>
      </div>
      <img class="more-btn" src="/images/arrow-down.png">
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 比赛卡片配置数组
const competitions = ref([
  {
    id: 'planting',
    title: '葫林争霸·葫芦种植能手大赛',
    registrationTime: '2025. 09.01----2025. 10. 16',
    background: '#2d5a27', // 深绿色
    status: 'open' // open, closed, upcoming
  },
  {
    id: 'creative',
    title: '奇葫妙想·葫芦文创大赛',
    registrationTime: '2025. 08. 25----2025. 09. 25',
    background: '#dc143c', // 深红色
    status: 'open'
  },
  {
    id: 'craft',
    title: '百葫雅韵·葫芦工艺大赛',
    registrationTime: '2025. 08. 25----2025. 09. 30',
    background: '#4169e1', // 深蓝色
    status: 'open'
  }
])

// 报名处理函数
const handleRegistration = () => {
  // 跳转到报名表单页面，传递比赛信息
  router.push({
    path: '/register',
    query: {}
  })
}
</script>

<style lang="less" scoped>
// 定义变量
@primary-green: #005918;
@light-green: #a8d5a8;
@yellow: #ffd700;
@orange: #ff8c00;
@blue: #4169e1;
@red: #dc143c;
@white: #ffffff;
@text-dark: #2c3e50;
@text-gray: #333333;
@shadow: rgba(0, 0, 0, 0.1);

.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

// 文化节横幅
.festival-banner {
  flex: 0 0 400px;
  position: relative;
  background-image: url('/images/banner-bg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  .festival-logo {
    width: 300px;
    margin: 1.1rem 1.4rem;
  }
}

// 比赛卡片区域
.competitions-section {
  position: relative;
  flex: 1;
  padding: 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: auto;
  background-image: url('/images/page-bg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  .more-btn{
    position: absolute;
    bottom: 0.5rem;
    right: 1rem;
    width: 1.2rem;
  }
}

.competition-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #E4FAD3;
  border-radius: 15px;
  padding: 1rem 0 0.6rem 0;
  box-shadow: 0 4px 15px @shadow;
  border: 2px solid @light-green;


  .card-header {
    margin-bottom: 0.6rem;
    text-align: center;

    .competition-title {
      color: @primary-green;
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0 0 0.5rem 0;
    }
  }

  .registration-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;

    .time-label {
      background: @yellow;
      color: @text-dark;
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
    }

    .time-range {
      color: @text-gray;
      font-size: 0.9rem;
    }
  }

  .register-btn {
    width: 60%;
    padding: 0.5rem 0 0.4rem 0;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: @white;
    cursor: pointer;
  }
}
</style>
